﻿// 轮播定时操作
$(function () {
    let heroUnitConfig = {
        parent: '.hero-unit div:nth-child(1)',
        element: '.hero-unit div:nth-child(1) img:nth-child(1)',
        speed: 2000,
        stayTime: 6000,
    }

    function heroUnitAddImg(url, type) {
        let node = document.createElement("img");
        node.src = url;
        if (type === "append") {
            node.style = "display:none;position:absolute;top:0;"
        }
        $(heroUnitConfig.parent).append(node);
    }

    function heroUnitWork() {
        let heros = [
            '/Content/Images/hero-unit-1.jpg',
            '/Content/Images/hero-unit-2.jpg'
        ]
        if ($(heroUnitConfig.element).length === 0) {
            heroUnitAddImg(heros[0]);
        }
        let index = 0;
        setInterval(() => {
            index++;
            if (index === heros.length) {
                index = 0;
            }
            heroUnitAddImg(heros[index], "append")
            $(heroUnitConfig.element).next().fadeIn(heroUnitConfig.speed, "linear")
            $(heroUnitConfig.element).fadeOut(heroUnitConfig.speed, "linear", function () {
                //$(this).attr("src", heros[i]);
                $(this).next().attr("style", "");
                $(this).remove();
            });
        }, heroUnitConfig.speed + heroUnitConfig.stayTime)
    }

    $('.hero-unit__next-section').click(function () {
        $('html,body').animate({ scrollTop: $(".landing-page__main").offset().top - 80 }, 600)
    });

    heroUnitWork();
});


// device-preview 操作
$(function () {
    const DeviceItem = {
        props: {
            id: {
                type: Number,
            },
            title: {
                type: String,
                required: true
            },
            content: {
                type: String,
                required: true
            },
            icon: {
                type: String,
                required: true
            },
            isActive: {
                type: Boolean,
                defalut: false
            }
        },
        template: `
            <section class="device-preview__preview" :class={'is-active':isActive} @mouseenter="mouseEnterEvent">
                <div class ="device-preview__preview-background"></div>
                <div class ="avatar-wrapper is-round" style="flex: 0 0 100px; width: 100px; height: 100px; margin-right: 20px; padding-bottom: 0px;">
                    <section class ="avatar-wrapper__img-wrapper" style="width: 100px; height: 100px; background: rgb(255, 255, 255);">
                        <img :src="icon" class ="avatar-wrapper__avatar border" style="width: 100px; height: 100px; border-color: rgb(236, 236, 236);">
                    </section>
                </div>
                <section class ="flex-container is-vertical" style="justify-content: center; align-items: stretch; align-self: auto;">
                    <h3>{{title}}</h3>
                    <p>{{content}}</p>
                </section>
            </section>`,
        methods: {
            mouseEnterEvent() {
                this.$emit("action", this.id);
            }
        }
    }
    const deviceBinding = {
        components: {
            DeviceItem
        },
        data() {
            return {
                activeIndex: 0,
                previewImgList: ['/Content/Images/homepage-p1.png'],
                list: [
                    {
                        title: '海量画师应征',
                        content: '可获得数十位画师应征\n作品、信誉透明，供您全面评估\n轻松找到心仪画师',
                        icon: '/Content/Images/homepage-icon-1.png',
                        previewImg: '/Content/Images/homepage-p1.png',
                    },
                    {
                        title: '流畅合作管理',
                        content: '轻松管理百位画师\n分段担保资金、分步审查稿件\n告别跑单、拖稿、失联',
                        icon: '/Content/Images/homepage-icon-2.png',
                        previewImg: '/Content/Images/homepage-p2.png',
                    },
                    {
                        title: '在线实时沟通',
                        content: '随时随地反馈修改意见\n与合作画师一对一直接沟通\n共同创作优秀作品',
                        icon: '/Content/Images/homepage-icon-3.png',
                        previewImg: '/Content/Images/homepage-p3.png',
                    }
                ]
            }
        },
        methods: {
            itemAction(id) {
                if (this.activeIndex === id) return;
                this.activeIndex = id;
                this.swtichPreviewImg();
            },
            swtichPreviewImg() {
                this.previewImgList.splice(0, 1);
                this.previewImgList.push(this.list[this.activeIndex].previewImg);
            }
        }
    }
    Vue.createApp(deviceBinding).mount('#device-preview');
});

// carousel
$(function () {
    const { h, reactive, watch, ref, onMounted } = Vue;
    // carousel-item
    const CarouselItem = {
        props: {
            id: {
                type: Number,
                required: true
            },
            isActive: {
                type: Boolean,
                default: false
            },
            src: {
                type: String,
                required: true,
            }
        },
        template: `
            <section class ="carousel-item" :class ={'is-active':isActive} v-on:click.stop="clickEvent">
                <div class ="landing-page-artworks__carousel-item-wrapper">
                     <img :src="src" :style="style" lazy="loaded" ref="wrapperImg">
                </div>
            </section>
            `,
        data() {
            return {
                style: {},
                shadowStyle: {}
            }
        },
        methods: {
            clickEvent() {
                this.$emit('actionClick', this.id);
            }
        },
        watch: {
            isActive: {
                immediate: true,
                handler() {
                    let img = new Image();
                    img.src = this.src;
                    img.onload = () => {
                        const width = img.width;
                        const height = img.height;
                        if (this.isActive) {
                            if (width > height) {
                                this.style = { height: `${height * 0.75}px` }
                            } else {
                                this.style = { width: `${width * 0.64}px` }
                            }
                        } else {
                            if (width > height) {
                                this.style = { height: `350px` }
                            } else {
                                this.style = { width: `350px` }
                            }
                        }
                    }
                }
            }
        }
    }

    const Carousel = {
        name: 'Carousel',
        components: { CarouselItem },
        props: {
            activeIndex: {
                type: Number,
                default: 0,
            },
            list: {
                type: Array,
                required: true
            }
        },
        template: `
             <section class ="carousel" ref="carousel" style="height:680px;">
                <carousel-item v-for="(item,index) in listData" :key="index" :src="item.src" :style="item.style" :id="index" :is-active="activeIndex === index" v-on:action-click="clickEvent"></carousel-item>
             </section>
            `,
        data() {
            return {
                listData: [],
                translate: {
                    x: 0,
                    firstNextStep: 540,
                    step: 340,
                },
                activeStyle: {
                    width: 770,
                    height: 680,
                },
                defalutStyle: {
                    width: 340,
                    height: 340,
                },
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.calcFirstTranslateX()
            })
        },
        methods: {
            getData() {
                this.listData = [...this.list];
            },
            calcFirstTranslateX() {
                const el = this.$refs.carousel;
                const elWidth = el.offsetWidth;
                const firstTranslateX = (elWidth / 2) - (this.activeStyle.width / 2) + 10;
                this.translate.x = firstTranslateX;
            },
            clickEvent(index) {
                this.$emit('actionClick', index);
            },
            carouselItemStyle(activeIndex) {
                const list = this.listData;
                const middleNum = Math.round(list.length / 2);
                const len = list.length;
                const baseNum = this.translate.firstNextStep + this.translate.x + 5;
                let translateXList = [];
                let zIndexList = [];
                let loopIndexList = [];
                for (let i = 0; i < list.length; i++) {
                    let loopIndex = i - activeIndex;
                    let translateX = loopIndex;
                    let zIndex = (len - loopIndex) * 10;
                    if (loopIndex === 0) {
                        translateX = this.translate.x;
                    } else if (loopIndex === 1 || (loopIndex < 0 && len + loopIndex === 1)) {
                        translateX = baseNum;
                        if (loopIndex < 0) {
                            zIndex = ((len + loopIndex - 1) - loopIndex) * 10;
                        }
                    } else if (loopIndex < 0 && len + loopIndex < middleNum) {
                        translateX = baseNum + ((len + loopIndex - 1) * this.translate.step);
                        zIndex = ((len + loopIndex - 1) - loopIndex - 1) * 10;
                    } else if (loopIndex < 0 && len + loopIndex >= middleNum) {
                        translateX = baseNum + ((len + loopIndex) * this.translate.step) - (this.translate.step * (len + 1));
                        zIndex = (len + loopIndex) * 10;
                    } else if (loopIndex < middleNum) {
                        translateX = baseNum + ((loopIndex - 1) * this.translate.step);
                    } else if (loopIndex >= middleNum) {
                        translateX = baseNum + ((loopIndex) * this.translate.step) - (this.translate.step * (len + 1));
                        zIndex = loopIndex * 10;
                    }
                    translateXList.push(translateX);
                    zIndexList.push(zIndex);
                    loopIndexList.push(loopIndex);
                }


                list.forEach((item, index) => {
                    const getTranslateX = () => {
                        return translateXList[index];
                    };
                    const getZIndex = () => {
                        return zIndexList[index];
                    };

                    const getTransition = () => {
                        if (loopIndexList.length <= 5) {
                            return;
                        }
                        if (loopIndexList[index] === 0) {
                            return;
                        } else if (loopIndexList[0] === 0 && (index === 1 || index == 2 || index === len - 1 || index === len - 2)) {
                            return;
                        } else if (loopIndexList[loopIndexList.length - 1] === 0 && (index === len - 2 || index === len - 3 || index === 0 || index === 1)) {
                            return;
                        } else if (loopIndexList[loopIndexList.length - 2] === 0 && (index === 0 || index === 1 || index == 2 || index === len - 1)) {
                            return;
                        } else if (loopIndexList[1] === 0 && (index === 0 || index === len - 1 || index === len - 2 || index === len - 3)) {
                            return;
                        } else {
                            let zeroLoopIndex = loopIndexList.findIndex(item => item === 0);
                            if (Math.abs(index - zeroLoopIndex) < 3) {
                                return;
                            }
                        }
                        return "none 0s ease 0s";
                    }

                    let translateX = getTranslateX();
                    const style = {
                        width: index === activeIndex ? `${this.activeStyle.width}px` : `${this.defalutStyle.width}px`,
                        height: index === activeIndex ? `${this.activeStyle.height}px` : `${this.defalutStyle.height}px`,
                        zIndex: getZIndex(),
                        transition: getTransition(),
                        transform:
                            `translateX(${translateX}px)`,
                    };
                    item.style = Object.assign({}, style);
                })
            },
            setCarouselItemStyle() {
                let timer = setInterval(() => {
                    if (this.translate.x !== 0) {
                        clearInterval(timer);
                        this.calcFirstTranslateX()
                        this.carouselItemStyle(this.activeIndex);
                    }
                }, 50)
            }
        },
        watch: {
            list: {
                immediate: true,
                handler() {
                    this.getData();
                    this.setCarouselItemStyle();
                }
            },
            activeIndex: {
                handler() {
                    this.setCarouselItemStyle();
                }
            }
        }
    }

    const ArtworkItem = {
        setup(props, { emit }) {
            const clickEvent = $event => {
                emit('actionClick', props.id)
            }
            return () => h(
                'div',
                {
                    class: ['landing-page-artworks__artwork-cell', { 'is-active': props.isActive }],
                    onClick: clickEvent
                }, h('img', { src: props.src }));
        },
        props: {
            id: {
                type: Number,
                required: true
            },
            isActive: {
                type: Boolean,
                default: false
            },
            src: {
                type: String,
                required: true,
            }
        },

    }

    const Artwork = {
        components: { ArtworkItem },
        props: {
            activeIndex: {
                type: Number,
                default: 0,
            },
            list: {
                type: Array,
                required: true
            }
        },
        setup(props, { emit }) {
            const itemClickEvent = (id) => {
                emit("actionClick", id)
            }

            const getArrowMaxLeft = () => {
                const node = document.querySelector('.landing-page-artworks__artwork-list');
                const nodeWidth = node.offsetWidth;
                const parentNodeWidth = node.parentNode.offsetWidth;
                arrowConfig.maxLeft = nodeWidth - parentNodeWidth;
            }

            const arrowConfig = reactive({
                step: 4,
                maxLeft: 0,
            })


            const listStyleLeft = ref(0);

            onMounted(() => {
                getArrowMaxLeft()
            })

            return () => [
                h('div',
                    { class: 'landing-page-artworks__artwork-list', style: { left: `${listStyleLeft.value}px` } },
                    props.list.map((item, index) => {
                        return h(ArtworkItem, { 'isActive': index === props.activeIndex, src: item.src, id: index, onActionClick: itemClickEvent })
                    })
                ),
                h(
                    'span',
                    {
                        class: 'landing-page-artworks__left-show',
                        onClick: () => {
                            let left = listStyleLeft.value + (arrowConfig.step * 100);
                            if (left > 0) {
                                left = 0;
                            }
                            listStyleLeft.value = left;
                        }
                    },
                    h(
                        'i',
                        {
                            class: 'el-icon-arrow-left'
                        }
                    )
                ),
                h(
                    'span',
                    {
                        class: 'landing-page-artworks__right-show',
                        onClick: () => {
                            let left = listStyleLeft.value - (arrowConfig.step * 100);
                            if (Math.abs(left) > arrowConfig.maxLeft) {
                                left = -arrowConfig.maxLeft;
                            }
                            listStyleLeft.value = left;
                        }
                    },
                    h(
                        'i',
                        {
                            class: 'el-icon-arrow-right'
                        }
                    )
                )
            ];
        }
    }

    const app = Vue.createApp({
        components: { Carousel, Artwork },
        data() {
            return {
                activeIndex: 0,
                list: [],
                squareList: []
            }
        },
        created() {
            this.getData();
            this.getSquareImgData();
        },
        methods: {
            getData() {
                for (let i = 1; i <= 10; i++) {
                    this.list.push({
                        src: `/Content/Images/Demo/carousel-${i}.jpg`,
                    })
                }
            },
            getSquareImgData() {
                for (let i = 1; i <= 10; i++) {
                    this.squareList.push({
                        src: `/Content/Images/Demo/carousel-mini-${i}.jpg`,
                    })
                }
            },
            carouselClickEvent(id) {
                if (this.activeIndex === id) {
                    return;
                }
                this.activeIndex = id;
            },

        }
    });
    app.use(ElementPlus);
    app.mount('#carousel');
})

// comments
$(function () {
    const { h, reactive, watch, ref, onMounted } = Vue;

    const CommentCell = {
        name: 'CommentCell',
        props: {
            brandImg: {
                type: String,
                required: true
            },
            role: {
                type: String,
                required: true
            },
            roleName: {
                type: String,
                required: true
            },
            content: {
                type: Array,
                required: true
            }
        },
        setup(props) {
            return () => h(
                'article',
                { class: 'comment-cell-wrapper' },
                h(
                    'section',
                    { class: 'comment-cell' },
                    [
                        h(
                            'div',
                            { class: 'comment-cell__header' },
                            h(
                                'img',
                                { style: { maxWidth: '100%' }, src: props.brandImg },
                            )
                        ),
                        h(
                            'div',
                            { class: 'comment-cell__main' },
                            [
                                h(
                                    'p',
                                    { class: 'comment-cell__role' },
                                    props.role
                                ),
                                h(
                                    'h3',
                                    props.roleName
                                )
                            ].concat(props.content.map((item) => {
                                return h(
                                    'p',
                                    { class: 'comment-cell__content' },
                                    item
                                )
                            }))
                        )
                    ]
                )
            )
        }
    };

    const Comment = {
        name: 'Comment',
        components: { CommentCell },
        props: {
            data: {
                type: Array,
                required: true,
            }
        },
        setup(props) {

            return () => h(
                'div',
                { class: 'landing-page-comments__comments-wrapper' },
                props.data.map(item => {
                    return h(
                        CommentCell,
                        {
                            brandImg: item.brandImg,
                            role: item.role,
                            roleName: item.roleName,
                            content: item.content
                        }
                    )
                })
            )
        }
    }

    const app = Vue.createApp({
        components: { Comment },
        setup() {
            const list = ref([])

            const getData = () => {
                const data = [
                    {
                        brandImg: '/Content/Images/Demo/brand-1.png',
                        role: '西山居 约稿负责人',
                        roleName: '3蓝诺3',
                        content: [
                            '页面设计很直观，画师风格鲜明，约稿面板的流程清晰约稿很方便，网站客服热心。',
                            '画师和企划方都可以有更多收益，体感很NICE，期待更多合作。'
                        ]
                    },
                    {
                        brandImg: '/Content/Images/Demo/brand-2.png',
                        role: '星辉天拓 约稿负责人',
                        roleName: 'EARVA',
                        content: [
                            '画师众多，找画师也方便，基本上各种风格的画师都能在这里找到。',
                            '约稿流程清晰，有问题也能马上反馈，希望合作能越来越多，帮助项目越做越好！'
                        ]
                    },
                    {
                        brandImg: '/Content/Images/Demo/brand-3.png',
                        role: '网易 倩女幽魂项目组',
                        roleName: '网易（杭州）',
                        content: [
                            '专业的平台，优质的服务。画师资源十分丰富，风格多样。',
                            '约稿流程清晰明确，操作方便。期待以后有更深入的合作！'
                        ]
                    },
                    {
                        brandImg: '/Content/Images/Demo/brand-4.png',
                        role: '完美世界 梦间集研发组',
                        roleName: 'OuYang',
                        content: [
                            '画师帮平台画师质量有品控保障，使用方便还可在平台上“货比三家”，省去寻找画师的麻烦。',
                            '帮助企业简化外包的流程，并且完工速度快，助力项目提升开发效率。画师帮平台已成为我们长期合作的优质供应商。'
                        ]
                    },
                    {
                        brandImg: '/Content/Images/Demo/brand-5.png',
                        role: '中手游 约稿负责人',
                        roleName: '终而复始',
                        content: [
                            '平台通过本身的专业能力，降低了合作项目与画师的沟通成本。',
                            '并且资源储备丰富，各种风格需求，都能够快速地找到合适画师，有效减少了绘制以外的沟通时间，非常赞！'
                        ]
                    },
                    {
                        brandImg: '/Content/Images/Demo/brand-6.png',
                        role: '香港网易互动娱乐',
                        roleName: '啊樹',
                        content: [
                            '画师帮提供了一个对双方很好的平台，给双方提供了更多的利益，减少了企划方和画师之间的相互猜疑，可以更好更放心的去完成工作。目前我们正在密切合作中~',
                        ]
                    }
                ]
                list.value = data;
            }
            
            getData();

            return {
                list
            }
        }
    });
    app.mount('#comments');
})